const btn = document.getElementById('btn')
const toasts = document.getElementById('toasts')

const types = ['error', 'success', 'info']
const messages = ['message one', 'message two', 'i love you', 'dont leave me', '你有一条消息', '就这样吧！']

btn.addEventListener('click', ()=> getMessage())

function getMessage(type = null, message = null) {
    const notif = document.createElement('div')
    notif.classList.add('toast')
    notif.classList.add(type ? type : getRandomType())

    notif.innerText = message ? message : getRandomMsg()

    toasts.appendChild(notif)

    setTimeout(() => {
        notif.remove()
    }, 3000)
}

function getRandomType() {
    return types[Math.floor(Math.random() * types.length)]
}
function getRandomMsg() {
    return messages[Math.floor(Math.random() * messages.length)]
}